<!doctype html>
<html>
<?php
require_once('inc/weixiconfig.php');
require_once('globals.php');
?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5,user-scalable=no" >
<title>儿童专注力科学测评</title>
<link href="static/css/wx.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.bootcss.com/iCheck/1.0.2/skins/all.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
</head>
<style media="screen">
	#red,#blue{
		width: 30px;
		height: 30px;
	}
	.iradio_square-blue{
		margin-left: 80px;
	}

	#kidage{
		border: none !important;
		outline: none !important;
		background: #fff !important;
		border: solid 1px #000;
		/*很关键：将默认的select选择框样式清除*/
		appearance:none;
		-moz-appearance:none;
		-webkit-appearance:none;
		/*在选择框的最右侧中间显示小箭头图片*/
		background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
		/*为下拉小箭头留出一点位置，避免被文字覆盖*/
		padding-right: 14px;
	}
	#part4{
		min-height: 700px;
	}
	#part4 ul li{
		height: 90px !important;
		line-height: 90px !important;
	}
	#part4 ul li input {
		height: 70px;
		font-size: 24px;
	}
	#part4 ul li select {
		height: 70px;
		font-size: 24px;
	}
	#part4 ul li span{
		font-size: 24px;
	}
	#btnli{
		position: relative;
	}
	#btnli input{
		width: 180px;
	}
	#bbb button{
		position: absolute;
		right: 10px;
		top: 16px;
		background: #999;
		text-align: center;
		color: #333;
		padding: 10px 20px;
		height: 60px;
		line-height: 45px;
		border: none;
		outline: none;
		font-size: 24px;
		display: none;
	}
	#capli{
		display: none;
	}
</style>
<body>
	<div class="tip-alert-top">
	  请完成所有题目并提交，即刻获取专业测试结果
	</div>
	<form id="exam" class="form-examlist">
		<ul id="part1"></ul>
		<script type="text/html" id="detailsTemp2">
			<%for (var i=0;i<data.length;i++) {%>
				<li class="clearfix" data-caid ='<%=data[i].category_id%>' data-tbid = '<%=data[i].tbid%>' >
					<div class="form-examlist-exam">
						<b><%=i+1%></b><h2><span><%=data[i].question%></span></h2>
					</div>
					<div class="form-examlist-items clearfix">
						<span style="padding-right:20px;"><input type="radio" name="s<%=i+1%>" value="0" class="ckeck"/>从不或很少</span>
						<span style="padding-right:20px;"><input type="radio" name="s<%=i+1%>" value="1" class="ckeck"/>有时</span>
						<span style="padding-right:20px;"><input type="radio" name="s<%=i+1%>" value="2" class="ckeck"/>经常</span>
						<span style="padding-right:20px;"><input type="radio" name="s<%=i+1%>" value="3" class="ckeck"/>很常见</span>
					</div>
				</li>
        	<%}%>
		</script>
		<div id="part4" class="contactinfo">
			<p class="tip-alert-info" style="font-size:24px;">
				请填写以下内容获取SNAP专业测试结果，我们将为您提供更多专业的服务和内容：
			</p>
			<ul>
				<li>
					<span>孩子性别：
						<input type="radio" name="colors" value="1" class="sexradio" id="blue">男
						<input type="radio" name="colors" value="2" class="sexradio" id="red">女
					</span>
				</li>
				<li class="kidage"><span>孩子年龄：
						<select id="kidage" name="kidage">
							<option value="0">请选择您孩子的年龄</option>
							<option value="7">7周岁</option>
							<option value="8">8周岁</option>
							<option value="9">9周岁</option>
							<option value="10">10周岁</option>
							<option value="11">11周岁</option>
							<option value="12">12周岁</option>
							<option value="13">13周岁</option>
						</select>
            		</span></li>
				<li class="parentname">
					<span>家长姓名：<input type="text" name="parentname" value="" class="par_num"/></span>
				</li>
				<li class="parenttel" id="bbb">
					<span>
						家长电话：<input type="text" name="parenttel" value="" class="par_phone" id="btnli" maxlength="11"/>
						<button type="button" name="button" class="captch">获取验证码</button>
					</span>
				</li>
				<li class="parentname" id="capli">
					<span>
						验证码：<input type="text" name="parentname" value="" id="captcher" class="par_num"/>
					</span>
				</li>
			</ul>
		</div>
		<span  id="submitbt" class="bottombar" style="text-align:center;line-height:90px;height:90px;font-size:30px;">确认提交</span>
	</form>
</body>
</html>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="http://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>
<script src="js/aui-art-template-a880d14/lib/template-web.js" charset="utf-8"></script>
<?php
$wxjs=1;
$title='【屋童树】儿童专注力科学测评';
$desc='如何判断孩子的专注力水平？儿童专注力科学测评帮助您';
$link='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$imagesurl='http://'.$_SERVER['HTTP_HOST'].'/static/img/sharelogo.jpg';
require_once('include.php');
?>
<script type="text/javascript">
    $().ready(function(){
		var flagg = true;
		var dataarr;
		// 手机号是否验证
		$.ajax({
			type : "GET",
			async:false,
			url: 'http://www.familyandtree.com/getcontent.php?ac=check_mobile',
			dataType : "json",
			success : function(data){
				if (data.status == 2) {
					$('#bbb button').hide();
					$('#capli').hide();
				}else {
					$('#bbb button').show();
					$('#capli').show();
					flagg = false;
				}
			},
			error:function(data){
				swal({
					button: false,
					title: data.error,
				});
			}
		});
		// 获取验证码
		$('.captch').click(function(){
			gettime();
			$.ajax({
				type : "POST",
				async:false,
				url: 'http://www.familyandtree.com/getcontent.php?ac=mobile_send',
				data:{
					mobile:$('#btnli').val()
				},
				dataType : "json",
				success : function(data){
					if (data.error != '') {
						swal({
							button: false,
							title: data.error,
						});
						$('.captch').attr("disabled",true)
						return false;
					}else {

					}
				},
				error:function(data){
					swal({
						button: false,
						title: data.error,
					});
				}
			});
		})

		$('.sexradio').iCheck({
			 labelHover : false,
			 cursor : true,
			 checkboxClass : 'icheckbox_square-blue',
			 radioClass : 'iradio_square-blue',
			 increaseArea : '10%'
			});

		$('.iradio_square-blue').css({
			margin:"15px"
		})

		// 获取页面初始化时间
		var begtime = new Date();
		var begunixtime = Date.parse(new Date(begtime));
		begunixtime = begunixtime / 1000;

		$.ajax({
			type : "GET",
			async:false,
			url: 'http://www.familyandtree.com/getcontent.php?ac=question_list',
			dataType : "json",
			success : function(data){
				$('#part1').append(template('detailsTemp2',data));
			},
			error:function(){
				alert('fail');
			}
		});

		$('#submitbt').click(function(){

			var sexval;
			var radios = $('.sexradio');
			for (var i = 0, length = radios.length; i < length; i++) {
				if (radios[i].checked) {
					// 弹出选中值
				sexval = radios[i].value;
					break;
				}
			}
			var isall = true;
			var endtime = new Date();
			var endunixtime = Date.parse(new Date(endtime));
			endunixtime = endunixtime / 1000;


			var secs = endunixtime - begunixtime;
			var a="",b="",c="",d="",ched,secstr,answer_str,sex;


			var arr = new Array();
			$('#part1 li').each(function(key,value){
				var ched = $('input[name="s'+(key+1)+'"]:checked').val();
				if (ched == '0') {
					ched = 'a';
				}else if (ched == '1') {
					ched = 'b';
				}else if (ched == '2') {
					ched = 'c';
				}else if(ched == '3'){
					ched = 'd';
				}else {
					ched = ''
				}
				secstr = $(this).data('tbid')+','+$(this).data('caid')+','+ched;
				arr.push(secstr);
				answer_str = arr.join("|")
				// 判断所有题目是否都已完成
				if (ched == '') {
					isall = false;
				}
			})
			if (isall == false) {
				swal({
					button: false,
					title: '请认真完成所有题目呦~',
				});
				return false;
			}

			if ($('#kidage').val()=='' || $('.par_phone').val() == '' || $('.par_num').val() == '' || answer_str == '' || sex == '') {
				swal({
					button: false,
					title: '请完善个人信息',
				});
				return false;
			}
			if(!(/^1(3|4|5|7|8)\d{9}$/.test($('.par_phone').val()))){
				swal({
					button: false,
					title: '请输入正确的手机号~',
				});
				return false;
			}
			if (flagg == false) {
				dataarr={
					mark:1,
					answer_str:answer_str,
					ch_sex:sexval,
					ch_age:$('#kidage').val(),
					p_phone:$('.par_phone').val(),
					p_name:$('.par_num').val(),
					secs:secs,
					captcha:$('#captcher').val()
				};
				if ($('#captcher').val() == '') {
					swal({
						button: false,
						title: '请填写验证码',
					});
					return false;
				}

			}else {
				dataarr={
					mark:1,
					answer_str:answer_str,
					ch_sex:sexval,
					ch_age:$('#kidage').val(),
					p_phone:$('.par_phone').val(),
					p_name:$('.par_num').val(),
					secs:secs,
				};
			}
			$.ajax({
				type : "POST",
				async:false,
				url: 'http://www.familyandtree.com/getcontent.php?ac=answer',
				dataType : "json",
				data:dataarr,
				success : function(data){
					if (data.error != "") {
						swal({
							button: false,
							title: data.error,
						});
						return false;
					}else {
						window.location.href="exam_result.php";
					}
				},
				error:function(data){
					swal({
						button: false,
						title: data.error,
					});
				}
			});
		})
    });

	function isPhoneNo(phone) {
		var pattern = /^1[34578]\d{9}$/;
		return pattern.test(phone);
	}

	function gettime(){
		var time = 60;
		var t = setInterval(function(){
			$('.captch').text(time + '秒后重新获取')
			$('.captch').attr("disabled",true)
			time--;
			if (time == '0') {
				$('.captch').text('重新获取')
				$('.captch').attr("disabled",false)
				clearInterval(t);
			}
		},1000);
	}
</script>
